<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <h:outputStylesheet name="./css/default.css"/>
            <h:outputStylesheet name="./css/cssLayout.css"/>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Home | E-Shop y Social</title>
            </f:facet>
        </h:head>

        <h:body>
            <h:form id="formulario">
                <p:growl id="growl" sticky="true" showDetail="true" life="2000" />
                <p:layout fullPage="true">

                    <p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true" >
                        <div id="right">
                            <h:form id="logerForm">            
                                <h:outputLink value="javascript:void(0)" onclick="PF('dlg').show();" title="login" rendered="#{loginController.selected==null}">
                                    <p:graphicImage value="resources/img/login.png" width="120" height="60" />
                                </h:outputLink>
                                <p:panel rendered="#{loginController.selected!=null}">
                                    <p:commandButton value="Logout" actionListener="#{loginController.logout}"
                                                     update=":formulario" icon="ui-icon-calculator" />
                                    <p:outputLabel   value="#{loginController.selected.nombres}" style="font-weight: bold; color: #0480be"/>
                                </p:panel>
                            </h:form>
                        </div>
                    </p:layoutUnit>

                    <p:layoutUnit position="south" size="70" closable="true" collapsible="true">
                        <div id="left">
                          
                                <p:panelGrid columns="2">
                                    <p:inputText placeholder="Buscar Producto" value="#{productosController.idbuscado}"/>
                                    <p:commandButton action="#{productosController.busqueda}" icon="ui-icon-search"/>
                                </p:panelGrid>
                          
                        </div>
                        <div id="right">
                            <p:commandButton value="COMPRAR" actionListener="#{compraController.guardar}"
                                             update="contenedorCentral" icon="ui-icon-calculator"/>
                        </div>
                    </p:layoutUnit>

                    <p:layoutUnit position="west" size="175" header="Left" collapsible="true">

                        <p:menu>
                            <p:submenu label="Resources">
                                <p:menuitem value="Productos" url="http://localhost:8080/shop_social_nosql/faces/productos.xhtml"/>
                                <p:menuitem value="Amigos" url="http://localhost:8080/shop_social_nosql/faces/Amigos.xhtml" />
                                <p:menuitem value="Mis Compras" url="http://localhost:8080/shop_social_nosql/faces/compras.xhtml" />
                                <p:menuitem value="Carrito" url="http://localhost:8080/shop_social_nosql/faces/carrito.xhtml" />
                                <p:menuitem value="Mis favoritos" url="http://www.primefaces.org/themes.html" />
                            </p:submenu>

                        </p:menu>
                        <h:panelGrid columns="1" >
                            <p:commandButton value="Cargar Carrito" action="#{carritoController.actualizar}" 
                                             update=":formulario"  />
                            <p:commandButton value="Cargar Productos" action="#{productosController.actualizar}" 
                                             update=":formulario"  />
                            <p:commandButton value="Cargar Compras" action="#{compraController.actualizar}" 
                                             update=":formulario"  />
                            <p:commandButton value="Cargar Amigos" action="#{amigosController.actualizar}" 
                                             update=":formulario"  />
                        </h:panelGrid>
                    </p:layoutUnit>
                    <p:layoutUnit position="east" size="185" header="Right" collapsible="true">
                        <p:menu>
                            <p:submenu label="Carrito" style="font-weight: bold; color: #0480be">

                                <p:menuitem>
                                    <h:panelGrid columns="2" style="width: 100%">
                                        <p:outputLabel value="Productos" style="font-weight: bold; color: maroon"/>
                                        <p:outputLabel value="(#{carritoController.addProductos.size()})" style="bold; color: goldenrod"/>

                                        <p:outputLabel value="Valor" style="font-weight: bold; color: maroon"/>
                                        <p:outputLabel value="$(142.34)" style="bold; color: goldenrod"/>

                                        <p:outputLabel value="Fecha" style="font-weight: bold; color: maroon"/>
                                        <p:outputLabel value="(Feb 10)" style="bold; color: goldenrod"/>
                                    </h:panelGrid>
                                </p:menuitem>
                                <p:menuitem>
                                    <h:panelGrid columns="3">
                                        <p:commandButton value="Add" update="growl" icon="ui-icon-cart"/>
                                        <span class="ui-separator">
                                            <span class="ui-icon  ui-icon-grip-dotted-vertical" />
                                        </span>
                                        <h:outputLink value="http://forum.primefaces.org/"><h:outputText value="Ver" style="color: #D20005"/></h:outputLink>
                                    </h:panelGrid>
                                </p:menuitem>

                            </p:submenu>

                        </p:menu>
                        <h:panelGrid columns="3" >
                            <f:facet name="header">
                                <p:outputLabel value="Ultima Agregacion" style="font-weight: bold; color: #0480be"/>
                            </f:facet>
                        </h:panelGrid>
                        <p:panelGrid columns="2">
                            <f:facet name="header">
                                <p:graphicImage value="resources/img/product8.png"  width="150" height="150" />
                            </f:facet>

                            <h:outputText value="ASN:" style="font-weight: bold; color: #045491"/>
                            <h:outputText value="AQSWDEFR" style="bold; color: #AFAFAF"/>

                            <h:outputText value="Titulo:" style="font-weight: bold; color: #045491"/>
                            <h:outputText value="Los Angeles Lakers" style="bold; color: #AFAFAF"/>

                            <h:outputText value="Grupo:" style="font-weight: bold; color: #045491"/>
                            <h:outputText value="Play Games" style="bold; color: #AFAFAF"/>

                            <h:outputText value="Sales:" style="font-weight: bold; color: #045491"/>
                            <h:outputText value="24.23" style="bold; color: #AFAFAF"/>
                        </p:panelGrid>
                        <h:panelGrid columns="1" >
                            <p:commandButton value="Update Carrito" action="#{carritoController.flush}" 
                                             update=":formulario"  />
                            <p:commandButton value="Update Productos" action="#{productosController.flush}" 
                                             update=":formulario"  />
                            <p:commandButton value="Update Compras" action="#{compraController.flush}" 
                                             update=":formulario"  />
                            <p:commandButton value="Update Amigos" action="#{amigosController.flush}" 
                                             update=":formulario"  />
                        </h:panelGrid>

                    </p:layoutUnit>
                    <p:layoutUnit position="center" id="contenedorCentral">
                        <div id="content" >
                            <ui:insert name="content"/>
                        </div>
                    </p:layoutUnit>

                </p:layout>
            </h:form>
            <p:dialog header="Login" widgetVar="dlg" resizable="false" modal="true" showEffect="explode" hideEffect="bounce">
                <h:form id="forlog">
                    <h:panelGrid id="panellogin" columns="2" cellpadding="5">
                        <h:outputLabel for="username" value="Username:" />
                        <p:inputText id="username" value="#{loginController.username}"  label="username" />

                        <h:outputLabel for="password" value="Password:" />
                        <p:password id="password" value="#{loginController.pass}"  label="password" />

                        <f:facet name="footer">
                            <p:commandButton value="Login" action="#{loginController.login}" 
                                             update=":formulario" 
                                             ajax="false"
                                             oncomplete="handleLoginRequest(xhr, status, args)" />
                        </f:facet>  
                    </h:panelGrid>
                </h:form>
            </p:dialog>
            <p:notificationBar position="top" effect="slide" styleClass="top" widgetVar="bar">
                <h:form id="notificacion">
                    <p:carousel value="#{productosController.similares()}" 
                                var="tar" numVisible="5"
                                itemStyleClass="carItem" style="width: 600px!important;" circular="true">
                        <h:panelGrid columns="2"  cellpadding="2" columnClasses="lbel,vlue" >
                            <h:outputText value="Titulo:" style="font-weight: bold; color: #0480be"/>
                            <h:outputText value="#{tar.title}" />

                            <h:outputText value="Grupo:" style="font-weight: bold; color: #0480be"/>
                            <h:outputText value="#{tar.group}"/>

                        </h:panelGrid>

                        <f:facet name="header">
                            Son #{productosController.similares().size()} similares.
                        </f:facet>
                    </p:carousel>
                </h:form>
            </p:notificationBar>
        </h:body>
    </f:view>
    <script type="text/javascript">
        function handleLoginRequest(xhr, status, args) {
            if (args.validationFailed || !args.loggedIn) {
                PF('dlg').jq.effect("shake", {times: 5}, 100);
            }
            else {
                PF('dlg').hide();
                $('#loginLink').fadeOut();
            }
        }
    </script>
</html>

